<template>
  <jm-modal-view :config="config" @checkData="(obj) => checkData(obj)" ref="jm_modal_view">

    <!-- ================= 弹窗 插槽 ======================= -->
    <template #dialog_slot="scope">
      <data-detail v-if="childData.checkref == 'data_detail'" ref="data_detail" @close-dialog="closeDialog"></data-detail>
      <!-- <data-detail2 v-if="childData.checkref == 'data_detail2'" ref="data_detail2" @close-dialog="closeDialog"></data-detail2> -->
    </template>

    <!-- 自定义 字段 处理插槽 -->
    <template #nickName="scope">
      {{ scope.row.nickName }}
    </template>

    <!-- 自定义 表格事件 处理插槽 -->
    <template #table_btn="scope">
      <!-- <el-button size="small" @click="diyBtn({ data: scope.row, index: scope._index, checkref: 'data_detail2' })">ceshi</el-button> -->
    </template>

    <!-- 自定义 弹窗 提交事件 -->
    <template #dialog_btn="scope">
      <el-button v-if="childData.checkref == 'data_detail'" type="primary" 
        @click="childDataOperation({
          checkref: 'data_detail',
          fn: 'submitData'
        })">
        保存
      </el-button>
      <!-- <el-button v-if="childData.checkref == 'data_detail2'" type="primary" 
        @click="childDataOperation({
          checkref: 'data_detail2',
          fn: 'submitData'
        })">
        保存2
      </el-button> -->
    </template>

    <!-- 自定义 筛选条件 插槽 -->
    <template #search_slot="scope">
      <div class="flexbox" style="margin-bottom:10px;">
        <div class="searchContent">企业名称：</div>
        <div class="searchBox" style="width:100%;">
          <el-input @input="advSearch()" placeholder="请输入企业名称" v-model="scope.adv_search.enterpriseName" size="small"></el-input>
        </div>
      </div>
      <div class="flexbox" style="margin-bottom:10px;">
        <div class="searchContent">企业名称：</div>
        <div class="searchBox" style="width:100%;">
          <el-input @input="advSearch()" placeholder="请输入企业名称" v-model="scope.adv_search.valueq" size="small"></el-input>
        </div>
      </div>
    </template>

    <!-- 自定义右键事件框 -->
    <template #contextMenu_slot="scope">
      <div class="clickitem" @click="contextMenuClick(scope.row)">
        <div class="itemleft">功能4</div>
        <div class="itemright"></div>
      </div>
    </template>

  </jm-modal-view>
</template>

<script setup>
  import JmModalView from '@/components/Jm_ModalView/JmModalView.vue'
  import DataDetail from './detail.vue'
  // import DataDetail2 from './detail2.vue'


  import { ref, nextTick, inject } from 'vue'
  
  import { useStore } from 'vuex'
  // 注入全局utils工具js
  const $utils = inject('$utils')
  // 注入全局filters工具js
  const $filters = inject('$filters')
  // 定义store
  const store = useStore()

  // 获取到的父组件给子组件的值
  const childData = ref({})
  // 定义ref值
  const data_detail = ref()
  const jm_modal_view = ref()

  // 自定义弹出内容ref
  // const data_detail2 = ref()
  
  // 配置模板表单数据
  const config = ref({
    // 是否开启右键事件
    openContextMenu: false,
    // 基础增删改查配置
    operation: {
      // 获取表格数据链接
      get_data_url: '',
      // 查询表格详情链接
      get_detaildata_url: '',
      // 删除表格数据连接
      del_data_url: '/Api/Enterprise/DoBatchDelete',
      // 编辑列表
      checkref: 'data_detail'
    },
    // 表格内容配置
    table_config: {
      column: [
        {
          prop: 'userName',
          label: '账号',
          width: 180
        },
        {
          prop: 'nickName',
          label: '昵称',
          // 是否开启slot插槽
          slot: true,
        }
      ]
    }
    
  })

  // ============================================================================= 自定义事件区域 ====================================================================






  // ================================================================================================================================================================

  
  // 保存数据提交方法
  function childDataOperation(obj) {
    // 自定义入参可为空
    let resData = {}
    eval(`${obj.checkref}.value.${obj.fn}({
      data: ${JSON.stringify(resData)}
    })`)
  }

  // 公共模板返回数据emit事件
  async function checkData(obj) {
    childData.value = obj
    await nextTick()
    const resData = obj.data
    eval(`${obj.checkref}.value.${obj.fn}({
      data: ${JSON.stringify(resData)}
    })`)
  }

  // 关闭弹窗事件
  function closeDialog(flag) {
    jm_modal_view.value.closeDialog(flag)
  }
  
  // ----------------- 右键点击选择菜单事件 -------------------------
  function contextMenuClick(item) {
    console.log(item)
    store.commit('set_pop_attr', {
      pop_show: false
    })
  }

  // 
  // function diyBtn(obj) {
  //   const sendobj = {
  //     data: obj.data,
  //     checkref: obj.checkref,
  //     fn: 'initData'
  //   }
  //   jm_modal_view.value.diyBtnFn(sendobj)
  // }
  // 高级筛选条件传入并搜索
  function advSearch() {
    jm_modal_view.value.advSearch()
  }

</script>

<style scoped>

</style>